<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="./css/swiper.min.css">

    <script src="./js/zepto.min.js"></script>
    <script src="./js/fastclick.min.js"></script>
    <script src="./js/swiper.jquery.min.js"></script>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #resultPage2Back{
            position: relative!important;
            height:auto!important;
            width:10rem;
        }
    </style>
</head>

<body onload="load()" bgcolor="#ffffff">


    <div id="startPage" style="display:none">
        <img id="startBack" src="./img/start/back.jpg"></img>
        <img id="startLogo" src="./img/start/logo.png"></img>
        <img id="startTitle" src="./img/start/title.png"></img>
        <input id="startBtn" type="image" src="./img/start/button.png" />
    </div>

    <div id="testPage" style="display:none">
        <img id="testBack" src="./img/test1/testback.jpg"></img>
        <img id="testBack1" src="./img/test1/testback1.png"></img>
        <img id="testTitle1" src="./img/test1/title1.png"></img>
        <input id="nextBtn" type="image" src="./img/test1/next.png" />
        <input id="resultBtn" type="image" src="./img/test5/makecard.png" />

        <input id="choiceBtn1" type="image" src="./img/test1/choice1.png" />
        <input id="choiceBtn2" type="image" src="./img/test1/choice2.png" />
        <input id="choiceBtn3" type="image" src="./img/test1/choice3.png" />
        <input id="choiceBtn4" type="image" src="./img/test1/choice4.png" />

        <img id="selectImg" src="./img/test1/selected.png"></img>

    </div>


    <div id="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!--<img src="./img/start/logo.png" width="100%" height="50%"></img>-->
                <div id="resultPage" style="display:none">
                    <img id="resultBack" src="./img/result/result1.jpg"></img>
                    <img id="resultBack1" src="./img/result/resultback.png"></img>
                    <p id="username" align="center" style="color:black;font-size:12px;">honghui5408</p>
                    <p id="resultText" align="center" style="color:#792ea7;font-size:20px;"></p>
                    <div id="resultInfo1">
                        <font id="resultCent1" style="color:#fdae44;font-size:14px;">11%</font>
                        <font id="result1" style="color:black;font-size:12px;">温润甜橙香</font>
                    </div>
                    <div id="resultInfo2">
                        <font id="resultCent2" style="color:#f85674;font-size:14px;">17%</font>
                        <font id="result2" style="color:black;font-size:12px;">少御钟情红玫瑰</font>
                    </div>
                    <div id="resultInfo3">
                        <font id="resultCent3" style="color:#792ea7;font-size:14px;">71%</font>
                        <font id="result3" style="color:black;font-size:12px;">仲夏微馨薰衣草</font>
                    </div>
                    <div id="resultContent">
                        <font style="color:black;font-size:13px;">你踮起脚尖，轻旋曼转。优雅又兼具质感的仲夏梦香，最能点亮你清丽脱俗的惊艳。</font>
                    </div>

                    <input id="dropdown1" type="image" src="./img/result/touming.png" />
                    <input id="dropdown2" type="image" src="./img/result/touming.png" />
                    <input id="dropdown3" type="image" src="./img/result/touming.png" />
                </div>
            </div>
            <div class="swiper-slide swiper-no-swiping">
                <div id="resultPage2">
                    <img id="resultPage2Back" src="./img/result/data.jpg"></img>
                </div>
            </div>
        </div>
    </div>


    <div id="choujiangPage" style="display:none">
        <img id="choujiangPic" src="./img/result/prize.png"></img>
        <input id="close1" type="image" src="./img/result/touming.png" />
        <input id="close2" type="image" src="./img/result/touming.png" />

        <input id="continue1" type="image" src="./img/result/touming.png" />
        <input id="continue2" type="image" src="./img/result/touming.png" />

        <!--<input style="border:0;" type="text" id="choujiangInput1"></input>-->
        <input style="border:0; background-color: transparent;padding-top:5px;" type="text" id="choujiangInput1"></input>
        <input style="border:0; background-color: transparent;padding-top:5px;" type="text" id="choujiangInput2"></input>
        <input style="border:0; background-color: transparent;padding-top:5px;" type="text" id="choujiangInput3"></input>
    </div>



    <script type="text/javascript">
        document.addEventListener('touchstart', function(event) {
            //event.preventDefault();
        }, false);

        window.addEventListener('load', function() {
            FastClick.attach(document.body);
        }, false);

        var SCREEN_WIDTH = document.documentElement.clientWidth;
        var SCREEN_HEIGHT = document.documentElement.clientHeight;
        var BEI_SHU = 0.6;
        var testStep = 1;

        var resultType = 1;

        var testIndex1 = 0;
        var testIndex2 = 0;
        var testIndex3 = 0;
        var testIndex4 = 0;
        var testIndex5 = 0;

        var choujiangResult = 1;

        function controlPosSet(control, left, top, width, height, zIndex) {
            control.style.position = "absolute";
            control.style.left = left + 'px';
            control.style.top = top + 'px';
            control.style.width = width + 'px';
            control.style.height = height + 'px';
            control.style.zIndex = zIndex;
        }

        function controlPosSet2(control, left, top, width, height, zIndex) {
            control.style.position = "relative";
            control.style.left = left + 'px';
            control.style.top = top + 'px';
            control.style.width = width + 'px';
            control.style.height = height + 'px';
            control.style.zIndex = zIndex;
        }

        window.onresize = function() {
            load();
        };

        function load() {
            //$("body").hide();


            initStart();

            initTest();

            document.getElementById("startPage").style.display = "inline";
            document.getElementById("testPage").style.display = "inline";

            $('#testPage').hide(true);

            document.getElementById("resultPage").style.display = "inline";

            initResult();



            $(".swiper-wrapper").height(SCREEN_HEIGHT + 'px');

            var mySwiper = new Swiper('#swiper-container', {
                direction: 'vertical',

            });

            $('#swiper-container').hide(true);
            var container = document.getElementById("swiper-container");
            controlPosSet(container, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, 0);

            initChouJiang();
            document.getElementById("choujiangPage").style.display = "inline";
            $('#choujiangPage').hide(true);
        }

        function initTest() {
            var testBack = document.getElementById("testBack");
            var testBack1 = document.getElementById("testBack1");
            var testTitle1 = document.getElementById("testTitle1");

            var nextBtn = document.getElementById("nextBtn");
            var resultBtn = document.getElementById("resultBtn");
            var choiceBtn1 = document.getElementById("choiceBtn1");
            var choiceBtn2 = document.getElementById("choiceBtn2");
            var choiceBtn3 = document.getElementById("choiceBtn3");
            var choiceBtn4 = document.getElementById("choiceBtn4");

            var selectImg = document.getElementById("selectImg");

            controlPosSet(testBack, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, -1);
            controlPosSet(testBack1, 10, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 20) * 1.393 * 0.5, (SCREEN_WIDTH - 20), (SCREEN_WIDTH - 20) * 1.393, 0);
            controlPosSet(nextBtn, SCREEN_WIDTH / 2 - 347 * BEI_SHU * 0.5 * (SCREEN_WIDTH / 375), SCREEN_HEIGHT / 2 + (SCREEN_WIDTH - 20) * 1.393 * 0.5 - 10, 347 * BEI_SHU * (SCREEN_WIDTH / 375), 70 * BEI_SHU * (SCREEN_HEIGHT / 667), 0);
            controlPosSet(testTitle1, SCREEN_WIDTH / 2 - (SCREEN_WIDTH - 20) * 0.4, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 20) * 1.393 * 0.5 - (SCREEN_WIDTH - 20) * 0.8 * 0.394 * 0.2, (SCREEN_WIDTH - 20) * 0.8, (SCREEN_WIDTH - 20) * 0.8 * 0.394, 0);
            controlPosSet(resultBtn, SCREEN_WIDTH / 2 - 347 * BEI_SHU * 0.5 * (SCREEN_WIDTH / 375), SCREEN_HEIGHT / 2 + (SCREEN_WIDTH - 20) * 1.393 * 0.5 - 10, 347 * BEI_SHU * (SCREEN_WIDTH / 375), 70 * BEI_SHU * (SCREEN_HEIGHT / 667), 0);

            controlPosSet(choiceBtn1, 40, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 0);
            controlPosSet(choiceBtn2, SCREEN_WIDTH / 2 + 20, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 0);
            controlPosSet(choiceBtn3, 40, SCREEN_HEIGHT / 2 + 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 0);
            controlPosSet(choiceBtn4, SCREEN_WIDTH / 2 + 20, SCREEN_HEIGHT / 2 + 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 0);

            controlPosSet(selectImg, 40, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);

            $('#selectImg').hide(true);

            $('#resultBtn').hide(true);

            nextBtn.addEventListener('touchend', function(event) {
                if ((testStep == 1 && testIndex1 < 1) || (testStep == 2 && testIndex2 < 1) || (testStep == 3 && testIndex3 < 1) || (testStep == 4 && testIndex4 < 1)) {
                    alert('请选择答案');
                    return;
                }
                var selectImg = document.getElementById("selectImg");
                testStep++;
                if (testStep == 2) {
                    $("#testTitle1").attr('src', "./img/test2/title2.png");

                    $("#choiceBtn1").attr('src', "./img/test2/choice1.png");
                    $("#choiceBtn2").attr('src', "./img/test2/choice2.png");
                    $("#choiceBtn3").attr('src', "./img/test2/choice3.png");
                    $("#choiceBtn4").attr('src', "./img/test2/choice4.png");

                    controlPosSet(selectImg, 40, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);
                } else if (testStep == 3) {
                    $("#testTitle1").attr('src', "./img/test3/title3.png");

                    $("#choiceBtn1").attr('src', "./img/test3/choice1.png");
                    $("#choiceBtn2").attr('src', "./img/test3/choice2.png");
                    $("#choiceBtn3").attr('src', "./img/test3/choice3.png");
                    $("#choiceBtn4").attr('src', "./img/test3/choice4.png");

                    controlPosSet(selectImg, 40, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);
                } else if (testStep == 4) {
                    $("#testTitle1").attr('src', "./img/test4/title4.png");

                    $("#choiceBtn1").attr('src', "./img/test4/choice1.png");
                    $("#choiceBtn2").attr('src', "./img/test4/choice2.png");
                    $("#choiceBtn3").attr('src', "./img/test4/choice3.png");
                    $("#choiceBtn4").attr('src', "./img/test4/choice4.png");
                    controlPosSet(selectImg, 40, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);
                } else if (testStep == 5) {
                    $("#testTitle1").attr('src', "./img/test5/title5.png");

                    $("#choiceBtn1").attr('src', "./img/test5/choice1.png");
                    $("#choiceBtn2").attr('src', "./img/test5/choice2.png");
                    $("#choiceBtn3").attr('src', "./img/test5/choice3.png");
                    $("#choiceBtn4").attr('src', "./img/test5/choice4.png");

                    controlPosSet(selectImg, 40, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);

                    $('#nextBtn').hide(true);
                    $('#resultBtn').show(true);
                }
                $('#selectImg').hide(true);
                console.log('nextbtn');
            }, false);

            resultBtn.addEventListener('touchend', function(event) {
                if ((testStep == 5 && testIndex5 < 1)) {
                    alert('请选择答案');
                    return;
                }

                $('#testPage').hide(true);
                $('#startPage').hide(true);
                $('#swiper-container').show(true);

                var tmpIndex = 0;

                var count1 = 0;
                var count2 = 0;
                var count3 = 0;
                var count4 = 0;

                if (testIndex1 == 1) {
                    count1++;
                } else if (testIndex1 == 2) {
                    count2++;
                } else if (testIndex1 == 3) {
                    count3++;
                } else if (testIndex1 == 4) {
                    count4++;
                }

                if (testIndex2 == 1) {
                    count1++;
                } else if (testIndex2 == 2) {
                    count2++;
                } else if (testIndex2 == 3) {
                    count3++;
                } else if (testIndex2 == 4) {
                    count4++;
                }

                if (testIndex3 == 1) {
                    count1++;
                } else if (testIndex3 == 2) {
                    count2++;
                } else if (testIndex3 == 3) {
                    count3++;
                } else if (testIndex3 == 4) {
                    count4++;
                }

                if (testIndex4 == 1) {
                    count1++;
                } else if (testIndex4 == 2) {
                    count2++;
                } else if (testIndex4 == 3) {
                    count3++;
                } else if (testIndex4 == 4) {
                    count4++;
                }

                if (testIndex5 == 1) {
                    count1++;
                } else if (testIndex5 == 2) {
                    count2++;
                } else if (testIndex5 == 3) {
                    count3++;
                } else if (testIndex5 == 4) {
                    count4++;
                }

                tmpIndex = count1;
                if (tmpIndex == count2 && Math.random() > 0.5) {
                    tmpIndex = count2;
                    resultType = 2;
                } else if (tmpIndex < count2) {
                    tmpIndex = count2;
                    resultType = 2;
                }

                if (tmpIndex == count3 && Math.random() > 0.5) {
                    tmpIndex = count3;
                    resultType = 3;
                } else if (tmpIndex < count3) {
                    tmpIndex = count3;
                    resultType = 3;
                }
                if (tmpIndex == count4 && Math.random() > 0.5) {
                    tmpIndex = count4;
                    resultType = 4;
                } else if (tmpIndex < count4) {
                    tmpIndex = count4;
                    resultType = 4;
                }

                if (resultType == 1) {
                    $("#resultBack").attr('src', "./img/result/result1.jpg");

                    $('#resultText').text("仲夏梦香系");

                    $("#resultText").css("color", "#8533af");


                    $('# result1 ').text("温润甜橙香");
                    $('#result2').text("少御钟情红玫瑰");
                    $('#result3').text("仲夏微馨薰衣草");

                    var random3 = Math.floor(Math.random() * 100 * 0.2) + 50;
                    var random1 = Math.floor(Math.random() * 100 * 0.05) + 25;
                    var random2 = 100 - random1 - random3;
                    $('#resultCent1').text(random1 + '%');
                    $('#resultCent2').text(random2 + '%');
                    $('#resultCent3').text(random3 + '%');

                } else if (resultType == 2) {
                    $("#resultBack").attr('src', "./img/result/result2.jpg");

                    $('#resultText').text("乖甜俏香系");
                    $("#resultText").css("color", "#ec5e8f");

                    $('#result1').text("梦幻少女甜樱");
                    $('#result2').text("温润甜橙香");
                    $('#result3').text("清新沁爽香柠檬");

                    var random1 = Math.floor(Math.random() * 100 * 0.2) + 50;
                    var random2 = Math.floor(Math.random() * 100 * 0.05) + 25;
                    var random3 = 100 - random1 - random2;
                    $('#resultCent1').text(random1 + '%');
                    $('#resultCent2').text(random2 + '%');
                    $('#resultCent3').text(random3 + '%');

                } else if (resultType == 3) {
                    $("#resultBack").attr('src', "./img/result/result3.jpg");

                    $('#resultText').text("空灵薄香系");
                    $("#resultText").css("color", "#407f1d");

                    $('#result1').text("淡雅风情茉莉香");
                    $('#result2').text("特立独香小苍兰");
                    $('#result3').text("沉静悠扬木檀香");

                    var random1 = Math.floor(Math.random() * 100 * 0.2) + 50;
                    var random2 = Math.floor(Math.random() * 100 * 0.05) + 25;
                    var random3 = 100 - random1 - random2;
                    $('#resultCent1').text(random1 + '%');
                    $('#resultCent2').text(random2 + '%');
                    $('#resultCent3').text(random3 + '%');

                } else if (resultType == 4) {
                    $("#resultBack").attr('src', "./img/result/result4.jpg");

                    $('#resultText').text("醇黑暗香系");
                    $("#resultText").css("color", "#1679a0");

                    $('#result1').text("馥郁黑晚香玉");
                    $('#result2').text("含笑乱步迷迭香");
                    $('#result3').text("神秘魅惑幽兰");

                    var random1 = Math.floor(Math.random() * 100 * 0.2) + 50;
                    var random2 = Math.floor(Math.random() * 100 * 0.05) + 25;
                    var random3 = 100 - random1 - random2;
                    $('#resultCent1').text(random1 + '%');
                    $('#resultCent2').text(random2 + '%');
                    $('#resultCent3').text(random3 + '%');
                }


            }, false);

            choiceBtn1.addEventListener('touchend', function(event) {
                var selectImg = document.getElementById("selectImg");
                $('#selectImg').show(true);
                if (testStep == 1) {
                    testIndex1 = 1;
                } else if (testStep == 2) {
                    testIndex2 = 1;
                } else if (testStep == 3) {
                    testIndex3 = 1;
                } else if (testStep == 4) {
                    testIndex4 = 1;
                } else if (testStep == 5) {
                    testIndex5 = 1;
                }
                controlPosSet(selectImg, 40, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);
            }, false);

            choiceBtn2.addEventListener('touchend', function(event) {
                $('#selectImg').show(true);
                var selectImg = document.getElementById("selectImg");
                if (testStep == 1) {
                    testIndex1 = 2;
                } else if (testStep == 2) {
                    testIndex2 = 2;
                } else if (testStep == 3) {
                    testIndex3 = 2;
                } else if (testStep == 4) {
                    testIndex4 = 2;
                } else if (testStep == 5) {
                    testIndex5 = 2;
                }

                controlPosSet(selectImg, SCREEN_WIDTH / 2 + 20, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 120) * 0.5 * 1.143 - 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);
            }, false);

            choiceBtn3.addEventListener('touchend', function(event) {
                $('#selectImg').show(true);
                var selectImg = document.getElementById("selectImg");

                if (testStep == 1) {
                    testIndex1 = 3;
                } else if (testStep == 2) {
                    testIndex2 = 3;
                } else if (testStep == 3) {
                    testIndex3 = 3;
                } else if (testStep == 4) {
                    testIndex4 = 3;
                } else if (testStep == 5) {
                    testIndex5 = 3;
                }

                controlPosSet(selectImg, 40, SCREEN_HEIGHT / 2 + 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);
            }, false);

            choiceBtn4.addEventListener('touchend', function(event) {
                $('#selectImg').show(true);
                var selectImg = document.getElementById("selectImg");

                if (testStep == 1) {
                    testIndex1 = 4;
                } else if (testStep == 2) {
                    testIndex2 = 4;
                } else if (testStep == 3) {
                    testIndex3 = 4;
                } else if (testStep == 4) {
                    testIndex4 = 4;
                } else if (testStep == 5) {
                    testIndex5 = 4;
                }

                controlPosSet(selectImg, SCREEN_WIDTH / 2 + 20, SCREEN_HEIGHT / 2 + 10 + 20, (SCREEN_WIDTH - 120) / 2, (SCREEN_WIDTH - 120) * 0.5 * 1.143, 1);
            }, false);

        }

        function initResult() {
            var resultBack = document.getElementById("resultBack");
            var resultBack1 = document.getElementById("resultBack1");
            var username = document.getElementById("username");
            var resultText = document.getElementById("resultText");
            var resultInfo1 = document.getElementById("resultInfo1");
            var resultInfo2 = document.getElementById("resultInfo2");
            var resultInfo3 = document.getElementById("resultInfo3");
            var resultContent = document.getElementById("resultContent");

            var dropdown1 = document.getElementById("dropdown1");
            var dropdown2 = document.getElementById("dropdown2");
            var dropdown3 = document.getElementById("dropdown3");

            var resultPage = document.getElementById("resultPage");


            // var resultPage1 = document.getElementById("resultPage1");
            // var resultPage1Back = document.getElementById("resultPage1Back");

            // controlPosSet(resultPage1, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, 0);
            // controlPosSet(resultPage1Back, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, 3);

            var resultPage2 = document.getElementById("resultPage2");
            var resultPage2Back = document.getElementById("resultPage2Back");

            //controlPosSet2(resultPage2, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, 0);
            controlPosSet(resultPage2Back, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, 2);

            //$("#resultPage2Back").hide(true);



            //controlPosSet2(resultPage, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, -2);
            controlPosSet(resultBack, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, -1);

            $("#resultBack1").hide(true);
            $("#resultContent").hide(true);

            controlPosSet(resultBack1, 20, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 40) * 1.368 * 0.54, (SCREEN_WIDTH - 40), (SCREEN_WIDTH - 40) * 1.368, 0);
            controlPosSet(username, 20, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 40) * 1.368 * 0.23, (SCREEN_WIDTH - 40), 30, 0);
            controlPosSet(resultText, 20, SCREEN_HEIGHT / 2 - (SCREEN_WIDTH - 40) * 1.368 * 0.25 + 26, (SCREEN_WIDTH - 40), 30, 0);
            controlPosSet(resultInfo1, SCREEN_WIDTH / 2 - 25, SCREEN_HEIGHT / 2 - 5 - 15 - 12, SCREEN_WIDTH / 2, 20, 0);
            controlPosSet(resultInfo2, SCREEN_WIDTH / 2 - 25, SCREEN_HEIGHT / 2 - 5 + 20 - 15 - 12, SCREEN_WIDTH / 2, 20, 0);
            controlPosSet(resultInfo3, SCREEN_WIDTH / 2 - 25, SCREEN_HEIGHT / 2 - 5 + 40 - 15 - 12, SCREEN_WIDTH / 2, 20, 0);

            controlPosSet(resultContent, 55 + 3, SCREEN_HEIGHT / 2 + (SCREEN_WIDTH - 110) * 1.368 * 0.23, (SCREEN_WIDTH - 110), 80, 0);

            controlPosSet(dropdown1, SCREEN_WIDTH / 2 - 233 * BEI_SHU * 0.5 * (SCREEN_WIDTH / 375), SCREEN_HEIGHT - 52 * BEI_SHU * (SCREEN_HEIGHT / 667) - 5, 233 * BEI_SHU * (SCREEN_WIDTH / 375), 52 * BEI_SHU * (SCREEN_HEIGHT / 667), 0);
            controlPosSet(dropdown2, SCREEN_WIDTH / 2 - 177 * BEI_SHU * 0.5 * (SCREEN_WIDTH / 375), SCREEN_HEIGHT - 52 * BEI_SHU * (SCREEN_HEIGHT / 667) - 32 * BEI_SHU * (SCREEN_HEIGHT / 667) - 22, 177 * BEI_SHU * (SCREEN_WIDTH / 375), 42 * BEI_SHU * (SCREEN_HEIGHT / 667), 0);
            controlPosSet(dropdown3, SCREEN_WIDTH / 2 - 467 * 0.5 * 0.5 * (SCREEN_WIDTH / 375), SCREEN_HEIGHT - 62 * BEI_SHU * (SCREEN_HEIGHT / 667) - 42 * BEI_SHU * (SCREEN_HEIGHT / 667) - 70 * (SCREEN_HEIGHT / 667), 467 * 0.5 * (SCREEN_WIDTH / 375), 90 * 0.5 * (SCREEN_HEIGHT / 667), 0);

            dropdown3.addEventListener('touchend', function(event) {
                $('#choujiangPage').show(true);
                if (choujiangResult == 0) {
                    $("#choujiangPic").attr('src', "./img/result/nprize.png");
                    $('#close1').hide(true);
                    $('#close2').show(true);
                    $('#continue1').hide(true);
                    $('#continue2').show(true);
                } else {
                    $("#choujiangPic").attr('src', "./img/result/prize.png");
                    $('#close1').show(true);
                    $('#close2').hide(true);
                    $('#continue1').show(true);
                    $('#continue2').hide(true);

                    $('#choujiangInput1').show(true);
                    $('#choujiangInput2').show(true);
                    $('#choujiangInput3').show(true);
                }

            }, false);
        }

        function initStart() {
            var startBack = document.getElementById("startBack");
            var startLogo = document.getElementById("startLogo");
            var startTitle = document.getElementById("startTitle");
            var startBtn = document.getElementById("startBtn");

            controlPosSet(startBack, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, -1);
            controlPosSet(startLogo, 10, 10, 175 * BEI_SHU, 106 * BEI_SHU, 0);
            controlPosSet(startTitle, SCREEN_WIDTH / 2 - 466 * BEI_SHU * 0.5 * (SCREEN_WIDTH / 375), 80, 466 * BEI_SHU * (SCREEN_WIDTH / 375), 173 * BEI_SHU * (SCREEN_HEIGHT / 667), 0);
            controlPosSet(startBtn, SCREEN_WIDTH / 2 - 345 * BEI_SHU * 0.5 * (SCREEN_WIDTH / 375), 80 + 173 * BEI_SHU * (SCREEN_HEIGHT / 667) + 15, 345 * BEI_SHU * (SCREEN_WIDTH / 375), 70 * BEI_SHU * (SCREEN_HEIGHT / 667), 0);

            startBtn.addEventListener('touchend', function(event) {
                $('#startPage').hide(true);
                $('#testPage').show(true);
            }, false);

        }

        function initChouJiang() {
            var choujiangPage = document.getElementById("choujiangPage");
            var choujiangPic = document.getElementById("choujiangPic");
            var close1 = document.getElementById("close1");
            var close2 = document.getElementById("close2");
            var continue1 = document.getElementById("continue1");
            var continue2 = document.getElementById("continue2");

            var choujiangInput1 = document.getElementById("choujiangInput1");
            var choujiangInput2 = document.getElementById("choujiangInput2");
            var choujiangInput3 = document.getElementById("choujiangInput3");



            controlPosSet(choujiangPage, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, 3);
            controlPosSet(choujiangPic, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT, 4);

            controlPosSet(close1, SCREEN_WIDTH * 0.842, SCREEN_HEIGHT * 0.125, SCREEN_WIDTH * 0.0826, SCREEN_WIDTH * 0.0826, 5);
            controlPosSet(close2, SCREEN_WIDTH * 0.842, SCREEN_HEIGHT * 0.176, SCREEN_WIDTH * 0.0826, SCREEN_WIDTH * 0.0826, 5);

            controlPosSet(continue1, SCREEN_WIDTH * 0.307, SCREEN_HEIGHT * 0.67, SCREEN_WIDTH * 0.389, SCREEN_HEIGHT * 0.079, 5);
            controlPosSet(continue2, SCREEN_WIDTH * 0.307, SCREEN_HEIGHT * 0.531, SCREEN_WIDTH * 0.389, SCREEN_HEIGHT * 0.067, 5);

            controlPosSet(choujiangInput1, SCREEN_WIDTH * 0.384, SCREEN_HEIGHT * 0.45, SCREEN_WIDTH * 0.341, SCREEN_HEIGHT * 0.049, 5);
            controlPosSet(choujiangInput2, SCREEN_WIDTH * 0.384, SCREEN_HEIGHT * 0.518, SCREEN_WIDTH * 0.341, SCREEN_HEIGHT * 0.049, 5);
            controlPosSet(choujiangInput3, SCREEN_WIDTH * 0.447, SCREEN_HEIGHT * 0.588, SCREEN_WIDTH * 0.281, SCREEN_HEIGHT * 0.049, 5);

            close1.addEventListener('touchend', function(event) {
                $('#choujiangPage').hide(true);
            }, false);

            close2.addEventListener('touchend', function(event) {
                $('#choujiangPage').hide(true);
            }, false);

            continue1.addEventListener('touchend', function(event) {
                $('#choujiangPage').hide(true);
            }, false);

            continue2.addEventListener('touchend', function(event) {
                $('#choujiangPage').hide(true);
            }, false);

        }
    </script>

</body>

</html>